<template>
  <ScalablePage>
    <template #default="{ scale }">
      <div class="resolution">
        <FirstLevelTitle text="大坝信息"></FirstLevelTitle>
        <div style="display: flex; align-items: baseline; align-items: flex-start; column-gap: 36px; margin-top: 20px">
          <!-- 实时水情 -->
          <div>
            <secondary-title text="水洞沟水库"></secondary-title>
            <div class="water-situation"></div>
          </div>
          <!-- 长城调蓄水池 -->
          <div>
            <secondary-title text="长城调蓄水池"></secondary-title>
            <div class="sedimentation">
              <div v-if="line > 1168" class="dashed-text-1">
                液位:{{ line }} m
              </div>
              <div v-else class="dashed-text-2">液位:{{ line }} m</div>
            </div>
          </div>
        </div>
        <div style="position: relative">
          <div>
            <div class="slider-demo-block">
              <div style="color: #fff; font-size: 8px">
                当前液位（m）：
                <el-input v-model="num1" @input="handleChange" placeholder="请输入当前液位" style="width: 96px" />
              </div>
              <div style="color: #fff; font-size: 8px">
                降雨量（mm）：
                <el-input v-model="num2" :disabled="num1 && Number(num1) > 0 && tableData[0].dangqiankurong > 0
                  ? false
                  : true
                  " @input="changeRainfall" placeholder="请输入降雨量" style="width: 96px" />
              </div>
              <div style="color: #fff; font-size: 8px">
                时间长度（h）：
                <el-input v-model="num3" @input="timeChange" :disabled="num2 && Number(num1) > 0 ? false : true"
                  placeholder="请输入时间长度" style="width: 96px" />
              </div>
            </div>
            <el-table :data="tableData" border style="width: 310px" align="center">
              <el-table-column prop="dangqiankurong" label="当前库容" width="50">
                <template #default="scope">
                  <span>{{ scope.row.dangqiankurong }}&nbsp;&nbsp;万m<sup>3</sup></span>
                </template>
              </el-table-column>
              <el-table-column prop="shijirukuliang" label="实际入库量" width="50">
                <template #default="scope">
                  <span>{{ scope.row.shijirukuliang }}&nbsp;&nbsp;m<sup>3</sup></span>
                </template>
              </el-table-column>
              <el-table-column prop="kurongbianhua" label="库容变化" width="70">
                <template #default="scope">
                  <span>{{ scope.row.kurongbianhua }}&nbsp;&nbsp;m<sup>3</sup></span>
                </template>
              </el-table-column>
              <el-table-column prop="shijirukurong" label="实际库容" width="65">
                <template #default="scope">
                  <span>{{ scope.row.shijirukurong }}&nbsp;&nbsp;m<sup>3</sup></span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="honghuicha" label="距离设计洪水位差" width="40">
            <template #default="scope">
              <span>{{ scope.row.honghuicha }}</span>
            </template>
          </el-table-column> -->
              <el-table-column prop="jiaoyanhongshuicha" label="距离校核洪水位差" width="75">
                <template #default="scope">
                  <span>{{ scope.row.jiaoyanhongshuicha }}&nbsp;&nbsp;&nbsp;m<sup>3</sup></span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <WaterChart style="position: absolute; left: 280px; top: -30px" :scale="scale" :yCoordinate="yCoordinate"
            :xCoordinate="xCoordinate"></WaterChart>
        </div>
        <div style="display: flex;">
          <div style="margin-top: 30px">
            <secondary-title text="天气预报"></secondary-title>
            <weatherForecast :scale="scale"></weatherForecast>
          </div>
          <!-- <FirstLevelTitle text="实时雨情"></FirstLevelTitle> -->
          <div style="margin-top: 30px">
            <secondary-title text="实时雨晴"></secondary-title>
            <div style="width: 200px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;column-gap: 12px;
    row-gap: 4px;">
              <div v-for="item in rainData" :key="item.name" class="Real-Rain-Clear">
                <div style="color: #fff; font-size: 8px; width: 100px">
                  &nbsp;&nbsp;&nbsp;{{ item.name }} <span style="font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.value
                  }}</span> {{ item.unit }}
                </div>
              </div>
            </div>
            <!-- <img style="width: 380px" src="@/assets/images/shuiwu/left/zuo11.png" alt="" /> -->
          </div>
        </div>
      </div>
    </template>
  </ScalablePage>
  <div style="width: 80%"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, reactive } from "vue";
import { yeWeiApi, getRainfallLoginAPI, getRainfallDataAPI } from "@/utils/shuiwu/api";
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件
import { shortPolling } from "@/utils/Polling";
import FixedSlider from "./FixedSlider.vue";
import WaterChart from "./WaterChart.vue";
/**
 * 天气预报组件
 */
import weatherForecast from "../components/weather-forecast.vue";
import dataList from "./data.json";
import floodDischarge from "./floodDischarge.json";

const value = ref(0);
const values = ref("");
const num1 = ref("");
const num2 = ref("");
const num3 = ref(1);
// 雨晴数据
const rainData = ref([]);
// 图表的纵坐标数据
const yCoordinate = ref([]);
// 图表的横坐标数据
const xCoordinate = ref([]);

const tableData = ref([
  {
    dangqiankurong: 0,
    shijirukuliang: 0,
    kurongbianhua: 0,
    shijirukurong: 0,
    honghuicha: 0,
    jiaoyanhongshuicha: 0,
  },
]);

const state = reactive({
  yewei: [],
  datenum: "",
  line: 0,
});

let { line } = toRefs(state);

/**
 * 获取实时雨晴数据
 */
const getRainfallLogin = async () => {
  const dataName = [
    {
      name: "5分钟雨量",
      unit: "mm", // 毫米
    },
    {
      name: "当前雨量",
      unit: "mm/h", // 毫米/小时
    },
    {
      name: "降水累积量",
      unit: "mm", // 毫米
    },
    {
      name: "水位",
      unit: "m", // 米
    },
    {
      name: "温度",
      unit: "℃", // 摄氏度
    },
    {
      name: "湿度",
      unit: "%", // 百分比
    },
    {
      name: "风速",
      unit: "m/s", // 米/秒
    },
    // {
    //   name: "风向",
    //   unit: "°", // 度
    // },
    {
      name: "光照",
      unit: "lux", // 勒克斯
    },
    // {
    //   name: "日累计辐射",
    //   unit: "MJ/m²", // 兆焦/平方米
    // },
    // {
    //   name: "PM25",
    //   unit: "μg/m³", // 微克/立方米
    // }
  ]

  getRainfallLoginAPI().then((res: any) => {
    getRainfallDataAPI().then((resData: any) => {
      rainData.value = [];
      resData.data.forEach((item: any, i: number) => {
        rainData.value.push({
          name: dataName[i].name,
          unit: dataName[i].unit,
          value: item[0],
          // icon: item?.icon,
        });
      });
      console.log(rainData.value);

    })
  })
}

/**
 *
 * @param value 根据当前液位获取当前库容
 */
const handleChange = (value: any) => {
  dataList.forEach((item: any) => {
    if (item.key == value) {
      yCoordinate.value = [];
      xCoordinate.value = [];
      dataList.forEach((item: any) => {
        if (value <= item.key) {
          yCoordinate.value.push(item.key);
          xCoordinate.value.push(item.value);
        }
      });
      tableData.value[0].dangqiankurong = item.value;
    }
  });
  changesStorageCapacity(value);
};

const timeChange = (value: any) => {
  changeRainfall(num2.value);
};

/**
 * 库容变化：实际入库量 - 上游库水位*计算流量*60*60
 */
const changesStorageCapacity = (value: any) => {
  floodDischarge.forEach((itemv2: any) => {
    if (value == itemv2.key || itemv2.key == Math.round(value)) {
      const storageCapacityData = (
        tableData.value[0].shijirukuliang -
        itemv2.value * 60 * 60
      ).toFixed(3);
      tableData.value[0].kurongbianhua = Number(storageCapacityData);
      actualStorageCapacity(itemv2.value);
    }
    // throw new Error('break')
    // else {
    //   tableData.value[0].kurongbianhua = 0
    // }
  });
};

/**
 * 实际库容：当前库容 + 库容变化
 */
const actualStorageCapacity = (value: any) => {
  const storageCapacityData = (
    Number(tableData.value[0].dangqiankurong) * 10000 +
    Number(tableData.value[0].kurongbianhua)
  ).toFixed(3);
  tableData.value[0].shijirukurong = Number(storageCapacityData);
  /**
   * 设计洪水差：设计洪水库容1171.6(62.9) - 实际库容
   */
  const designFloodDifferenceData = (
    629000 - tableData.value[0].shijirukurong
  ).toFixed(3);
  tableData.value[0].honghuicha = Number(designFloodDifferenceData);
  /**
   * 距离校验洪水差：校验洪水水库容1171.6(62.9) - 实际库容
   */ const designFloodDifferenceData2 = (
    6665000 - tableData.value[0].shijirukurong
  ).toFixed(3);
  tableData.value[0].jiaoyanhongshuicha = Number(designFloodDifferenceData2);
};

/**
 * 实际入库量：原设计报告数据 * 水文查询数据*（1-蒸发、渗漏、用水等总损失比例）*时间长度*降水量
 */
const changeRainfall = (value: any) => {
  if (Number(value) > 0) {
    const actual = (
      125 *
      0.042 *
      (1 - 0.958) *
      1 *
      num3.value *
      Number(value)
    ).toFixed(3); // 实际入库量
    tableData.value[0].shijirukuliang = actual;
  } else {
    tableData.value[0].shijirukuliang = 0;
  }
  changesStorageCapacity(num1.value);
};

onMounted(() => {
  shortPolling(() => getRainfallLogin(), 10000);
  shortPolling(() => getYeWei(632), 10000);
});

async function getYeWei(id: number) {
  yeWeiApi(id).then((res) => {
    let arr = res.rows as any;

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4378) {
        state.datenum = arr[i].ts;
        state.line = arr[i].value;
        let str = String(arr[i].value);
        for (let i = 0; i < 7 - str.length; i++) {
          str = "0" + str;
        }
        state.yewei = str.split("");
        return;
      }
    }
  });
}
</script>

<style lang="less" scoped>
@import "@/assets/common/font.css";

.Real-Rain-Clear {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 8px;
  width: 88px;
  height: 23px;
  background-image: url(@/assets/images/shuiwu/left/left-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100% 100%;
}

.resolution {
  .First-img {
    width: 324px;
    height: 26px;
  }

  .secondary-img {
    width: 171px;
  }
}

.water-situation {
  margin-top: 8px;
  width: 205px;
  height: 97px;
  background-image: url(@/assets/images/shuiwu/left/zuo13_v5.png);
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  color: #fff;
  position: relative;
}

.sedimentation {
  // 长城调蓄水池样式
  margin-top: 8px;
  width: 255px;
  height: 97px;
  background-image: url(@/assets/images/shuiwu/left/zuo14_v5.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  color: #fff;
}

.dashed-text-1 {
  display: flex;
  font-size: 10px;
  align-items: center;
  width: 116px;
  position: absolute;
  top: 25px;
  left: 19px;
}

.dashed-text-1::before,
.dashed-text-1::after {
  content: "";
  flex: 1;
  border-bottom: 0.5px dashed rgb(255, 255, 255);
  margin: 0 1px;
}

.dashed-text-1::before {
  flex: 1.3;
  /* 左边的虚线更长 */
}

.dashed-text-1::after {
  flex: 1;
  /* 右边的虚线更短 */
}

.dashed-text-2 {
  display: flex;
  font-size: 10px;
  align-items: center;
  width: 112px;
  position: absolute;
  top: 30px;
  left: 22px;
}

.dashed-text-2::before,
.dashed-text-2::after {
  content: "";
  flex: 1;
  border-bottom: 0.5px dashed rgb(255, 255, 255);
  margin: 0 1px;
}

.dashed-text-2::before {
  flex: 1.3;
}

.dashed-text-2::after {
  flex: 1;
}

.slider-demo-block {
  display: flex;
  width: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  column-gap: 10px;
}

:deep(.is-pure) {
  width: 200px !important;
}

:deep(.el-table) {
  font-size: 8px !important;
  background-color: #ffffff00;
}

:deep(.el-table .cell) {
  line-height: 9px;
  padding: 0 0px;
}

:deep(.el-table .el-table__cell) {
  padding: 4px 0;
}

:deep(.el-input) {
  font-size: 8px;
}

:deep(.el-input__inner) {
  height: 16px;
  line-height: 16px;
  color: #fff;
}

:deep(.el-input__wrapper) {
  border-radius: 0px;
  background-color: #ffffff00;
}

:deep(.el-table th.el-table__cell) {
  background-color: #ffffff00;
  color: #fff;
}

:deep(.el-table tr) {
  background-color: #ffffff00;
  color: #fff;
}

:deep(.el-table__body tr:hover > td) {
  background-color: transparent !important;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa00;
}
</style>
